<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:coords-units-03-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-coords-units-03-b.html">Full version</a>, <a href="basic-coords-units-03-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/coords.html#Units">7.10 Units</a></p>
 <p>
				<a href="basic-coords-units-02-b.html">coords-units-02-b ←</a> 
				<a href="basic-index.html">index</a>
				<a href="basic-coords-viewattr-01-b.html">→ coords-viewattr-01-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>coords-units-03-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=160 height=120>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/coords-units-03-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=160 height=120 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/coords-units-03-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of coords-units-03-b" src="../png/basic-coords-units-03-b.png" width="160" height="120"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
            <p>
            This test verifies both the initial viewport size and the support for the various
            unit specifiers.
            </p>
            <p>
            The units in SVG can be: user coordinate and CSS units: em, ex, px, pt, pc, cm, mm, 
            in and percentages. The test does not check the absolute length accuracy as this 
            can only be truly validated with a ruler. However, it validates that the different
            units are supported by drawing multiple elements who have the same length specified
            in different units.
            </p>
            <p>
            The viewport is the "finite rectangular region" where rendering occurs in SVG. 
            Hence, nothing should be rendered outside the viewport (paragraph 7.1). Furthermore,             when no positioning properties are set on the top svg element, the initial viewport             size should have the value of the top svg element's "width" and "height" attributes. 
            To check this behavior, the test does not define positioning properties on the top
            svg element but defines its "width" and "height" properties. Then it fills a red 
            rectangle that is bigger than the viewport size. Then, a rectangle, the size of the
            viewport is drawn in white. If rendering is limited to the viewport area, none of the 
            red should show.
            </p>
            <p>
            The line showing the "ex" units will not necessarily appear with the same length
            as shown in the reference image because the X-height of a font is not
            necessarily half of the font size (which is assumed in the reference image where
            1ex is considered to be .5em).
            </p>
            <p>
            The rendered picture should match the reference image approximately. There might be
            variations due to the exact pixel size as negotiated by the SVG renderer. 
            </p>

		</div>
<div class="linkbar"> <p>
				<a href="basic-coords-units-02-b.html">coords-units-02-b ←</a>
				<a href="basic-index.html">index</a>
				<a href="basic-coords-viewattr-01-b.html">→ coords-viewattr-01-b</a>
						</p></div>
</body>
</html>
